<template>
  <div class="body">
    <div class="my-swipe">
      <van-swipe :autoplay="3000" indicator-color="#ccc">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="header">
      <span @click="selectLocation"
        >上海
        <van-icon name="arrow-down" />
      </span>
      <van-search
        v-model="value"
        placeholder="请输入小区或地址"
        @search="onSearch"
      >
      </van-search>
      <van-icon name="map-marked" size="25px" class="ditu" @click="search" />
    </div>
    <div class="tab1">
      <van-grid clickable :column-num="4" :border='false'>
        <van-grid-item to="/find">
         <img src="@/assets/house.png" >
         <p>整租</p>
        </van-grid-item>
        <van-grid-item to="/home">
         <img src="@/assets/hezu.png" >
         <p>合租</p>
        </van-grid-item>
        <van-grid-item to="/home">
         <img src="@/assets/map.png" >
         <p>地图找房</p>
        </van-grid-item>
        <van-grid-item to="/home">
         <img src="@/assets/chuzu.png" >
         <p>去出租</p>
        </van-grid-item>
      </van-grid>
    </div>
    <div class='items'>
      <div class='heade-more'>
        <h3>租房小组</h3>
        <p @click='moreData'>更多</p>
      </div>
     
      <ul class='center-item'>
        <li v-for='item in groups' :key='item.id' class='li-item'>
          <img :src='"http://liufusong.top:8080"+item.imgSrc' alt="">
          <p>
          <span>{{item.title}}</span>
          <span>{{item.desc}}</span>
          </p>
        </li>
      </ul>
     
    </div>
  </div>
</template>

<script>
import { swiper, groups } from "@/api/users";

export default {
  name: "HomePage",
  components: {},
  props: {},
  data() {
    return {
      active: "0",
      value: "",
      images: [],
      groups: [],
    };
  },
  computed: {},
  watch: {},
  async created() {
    const data = await swiper();
    console.log(data);
    this.images.push("http://liufusong.top:8080" + data.body[0].imgSrc);
    this.images.push("http://liufusong.top:8080" + data.body[1].imgSrc);
    this.images.push("http://liufusong.top:8080" + data.body[2].imgSrc);
    const group = await groups();
    console.log(group);
    this.groups = group.body;
    console.log(this.groups);
    
  },
  methods: {
    onSearch() {},
    search() {
      this.$router.push("/maps");
    },
    selectLocation() {
      this.$router.push("/location");
    },
    moreData(){

    }
  },
};
</script>

<style scoped lang="less">
.body {
  .tab1 {
    margin-top: 5px;
    img{
      width:60px;
      height: 60px;
    }
    p{
      font-size: 14px;
    }
  }
  .my-swipe {
    position: relative;
    width: 100%;
    height: 200px;
    img {
      height: 200px;
    }
  }
  .header {
    position: absolute;
    top: 20px;
    left: 10px;
    padding: 0 20px;
    display: flex;
    height: 35px;
    line-height: 35px;
    .ditu {
      line-height: 35px;
      margin-left: 15px;
    }
  }
  .center {
    height: 100px;
  }
 .items{
  background-color: #f5f5f9;
   .heade-more{
    display:flex;
    height: 60px;
    // background-color: pink;
    h3{
      margin-left: 20px;
    }
    p{
     margin-left: 230px;
     margin-top: 20px;
    }
  }
  .center-item{
    margin-top: 10px;
    display: grid;
    grid-template-columns:auto auto;
    .li-item{
    background-color: #fff;
    margin-bottom:10px;
    margin-right: 7px;
    margin-left:7px;
    border-radius: 5px;
    display: flex;
    img{
      width: 70px;
      margin-right:5px;
      padding-left: 5px;
    }
    span{
      display: block;
    }
    //  background-color: pink;
    
    }
  }
 }
}
</style>
